<template>
	<view class="bg-white shadow rounded-lg p-20 mb-20">
		<view class="w-484">
			<view class="flex" @click="goStudyDetails(val.id)">
				<view class="rounded-md overflow-hidden relative w-172 h-172">
					<ImageBoxVue :src="val.headimg" width="176rpx" height="172rpx"></ImageBoxVue>
					<view class="absolute w-full py-4 pl-10 bottom-0" style="background-color: rgba(0, 0, 0, 0.4);">
						<text class="text-white">{{val.dur}}</text>
					</view>
				</view>
				<view class="pl-20 flex-1 flex flex-col">
					<text class="text-sm font-bold">{{val.name}}</text>
					<text class="flex-1 text-[#666666]">{{val.brief}}</text>
				</view>
				<!--  -->
			</view>
			<view class="flex justify-between mt-10">
				<view class="flex justify-center items-center w-172">
					<ImageBoxVue src="/static/icons/look.png" width="28rpx" height="29rpx"></ImageBoxVue>
					<text class="ml-10">{{val.look}}万</text>
				</view>
				<view class="flex-1 flex justify-center items-center">
					<view class="flex items-center mr-20">
						<ImageBoxVue src="/static/icons/red.png" width="28rpx" height="29rpx"></ImageBoxVue>
						<text class="ml-10">{{val.redprice}}钻</text>
					</view>
					<view class="flex items-center">
						<ImageBoxVue src="/static/icons/blue.png" width="28rpx" height="29rpx"></ImageBoxVue>
						<text class="ml-10">{{val.blueprice}}钻</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		jobQuery
	} from '@/config/publicFun';

	const {
		val,
		type
	} = defineProps(['val', 'type'])
	
	console.log(val);
	
	const goStudyDetails = (id) => {
		console.log("id",id);
		uni.navigateTo({
			url: `/pages/test/lesson?type=lesson&id=${id}`
		})
	}
</script>

<style>
</style>